<template>
  <transition name="fade">
    <div class="modal" v-show="props.visible">
      <div
        :style="{
          width: props.width + 'px'
        }"
        class="modal-content"
      >
        <div class="title">{{ props.title }}</div>
        <div class="content">
          {{ props.content }}
        </div>
        <slot></slot>
        <div class="action" v-show="props.showAction">
          <div @click="handleCancel" class="cancel btn">
            <span class="text">取消</span>
          </div>
          <div @click="handleComfirm" class="comfirm btn">
            <span class="text">确定</span>
          </div>
        </div>
      </div>
      <div class="modal-mask"></div>
    </div>
  </transition>
</template>

<script setup lang="ts">
const emit = defineEmits(['cancel', 'comfirm', 'update:visible'])

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  content: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  showAction: {
    type: Boolean,
    default: true
  },
  width: {
    type: String,
    default: '400'
  }
})

const handleCancel = () => {
  emit('cancel')
}

const handleComfirm = () => {
  emit('comfirm')
}
</script>

<style scoped lang="scss">
.modal {
  height: 0;
  width: 0;

  .modal-content {
    height: fit-content;
    width: 450px;
    background-color: var(--xz-card-bg);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--xz-main-radius);
    padding: 20px;
    z-index: 999;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .action {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;

      .btn {
        padding: 5px 30px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;

        .text {
          font-weight: 500;
          font-size: 0.8rem;
        }

        &.cancel {
          border: 1px solid var(--xz-theme);
          background-color: var(--xz-secondbg);
        }

        &.comfirm {
          background: var(--xz-blue);
          color: var(--xz-white);
        }
      }
    }
  }

  .modal-mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
